<template>
      <el-header height="80px" class="base_style">
        <el-row>
          <!--<el-col :span="2" class=""></el-col>-->
          <el-col :span="24" class="header_boder_down">
            <div class="hear_logo">
              <div class="block">
                <img src="../images/logo.svg"/>
              </div>
            </div>
            <!--header右边-->
            <div class="header_right">
              <div class="header_right_li nav-algolia-search">
                <el-input size="medium" v-model="headerSearch" placeholder="搜索文档"></el-input>
              </div>
              <div class="header_right_li">指南</div>
              <div class="header_right_li">组件</div>
              <div class="header_right_li">主题</div>
              <div class="header_right_li">资源</div>
              <div class="header_right_li nav-algolia-space">|</div>
              <div class="header_right_li">2.13.2<i class="el-icon-arrow-down"></i></div>
              <div class="header_right_li">中文<i class="el-icon-arrow-down"></i></div>
            </div>
          </el-col>
          <!--<el-col :span="2" class=""></el-col>-->
        </el-row>
      </el-header>

</template>

<script>
  export default {
    data () {
      return {
        imgUrl: './images/logo.svg',
        headerSearch: ''
      }
    }
  }
</script>

<style scoped>
  /*header*/
  .base_style {
    margin-top: -8px;
    padding: 0;
    background-color: white;
    z-index: 100;
  }

  .el-header {
    /*background-color: white;*/
    /*border: red 1px solid;*/
    position: fixed;
    width: 100%;

  }

  .header_boder_down {
    border-bottom: 1px solid #dcdfe6;;
  }

  .bg-purple-dark {
    /*background: #99a9bf;*/

  }

  .hear_logo {
    height: 100%;
    line-height: 100px;
    width: 146px;
    float: left;
    cursor: pointer;
  }

  .header_right {
    float: right;
  }

  .header_right_li {
    color: #888888;
    font-size: 16px;
    float: left;
    /*border: blue 1px solid;*/
    width: 76px;
    height: 80px;
    line-height: 80px;
    text-align: center;
    cursor: pointer;
  }

  .nav-algolia-search {
    width: 184px;
    height: 80px;
  }

  .nav-algolia-space {
    width: 41px;
  }

  .el-row {
    /*margin-bottom: 20px;*/
    /*&:last-child {*/
    /*margin-bottom: 0;*/
    /*}*/
    width: 1140px;
    height: 100%;
    position: relative;
    /*background-color: pink;*/
    margin: 0 auto;
  }

  .el-col {
    /*background-color: red;*/
    height: 100%;
  }

  /*header-end*/
</style>
